<template>
  <el-drawer v-model="drawerProps.isView" :destroy-on-close="true" size="30%" :title="`${drawerProps.title}`">
    <div class="container.top">
      <ProTable
        ref="myBankTable"
        :data="myBankList"
        title="用户列表"
        :columns="columns"
        :pagination="false"
        @row-click="handleSubmit"
      >
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>
      </ProTable>
    </div>
    <div class="container.top">
      <ProTable
        ref="officialBankTable"
        :data="officialBankList"
        title="用户列表"
        :columns="columns"
        :pagination="false"
        @row-click="handleSubmit"
      >
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>
      </ProTable>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="addQuestionsBatchDrawer">
import { onBeforeMount, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getBankListApi } from "@/api/modules/bank";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { addQuestionBatchApi } from "@/api/modules/bank_question";
import { ElMessage } from "element-plus";
import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import { ResultData } from "@/api/interface";

const myBankTable = ref<ProTableInstance>();
const officialBankTable = ref<ProTableInstance>();
const myBankList = ref<any>([]);
const officialBankList = ref<any>([]);

// 表格配置项
const columns: ColumnProps<any>[] = [
  { prop: "name", label: "题库名字", fixed: "left" },
  // { type: "selection", fixed: "left", width: 70 },
  { prop: "sum", label: "题目数量" }
];

const drawerProps = ref<any>({
  isView: false,
  title: "",
  row: {}
});

const getBankListParams = ref<any>({
  course_id: 0
});

// 接收父组件传过来的参数
const acceptParams = (params: any) => {
  drawerProps.value = params;
  getBankListParams.value = {
    course_id: params.course_id
  };
  getMyBankList();
};

const getMyBankList = async () => {
  let data: ResultData<any[]> = await getBankListApi({ course_id: getBankListParams.value.course_id });
  myBankList.value = [];
  officialBankList.value = [];
  for (let bank of data.data) {
    if (bank.type === "my") {
      myBankList.value.push(bank);
    } else {
      officialBankList.value.push(bank);
    }
  }

  return data;
};

// 提交数据（新增/编辑）
const handleSubmit = async (row: any, column: TableColumnCtx<any>) => {
  if (column.property == "radio" || column.property == "operation") return;
  try {
    const params = {
      bank_id: row.bank_id,
      questions: drawerProps.value.selectedList
    };
    const data = await addQuestionBatchApi(params);
    if (data.code !== "") {
      ElMessage.error(data.msg);
      return;
    }
    ElMessage.success({ message: `提交成功！` });
    drawerProps.value.isView = false;
  } catch (error) {
    console.log(error);
  }
  return true;
};

defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
@import "addQuestionsBatchDrawer";
</style>
